<template>
  <div style="margin-top: 20px">
    <el-table
      :data="getPage"
      :header-cell-style="headerStyle"
      :height="tableHeight"
      border
      :style="tableStyle">
      <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
        <template slot-scope="scope">
          <span>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template slot-scope="scope"  >
           <template v-for="item in optList" >
              <el-button  @click="handleClick(scope.row,item.key)" type="text" size="small">{{ item.name }}</el-button>
           </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


  </div>
</template>

<script>
    export default {
      created(){
        this.getTableHeight();

      },
      mounted(){
        this._page();
        window.onresize = () => {
          return (() => {
            this.windowHeight = document.documentElement.clientHeight // 高
            this.windowWidth = document.documentElement.clientWidth // 宽
          })()
        }
      },
      watch: {
        // 监听页面高度
        windowHeight(val) {
          let tableH = 190; //距离页面下方的高度
          this.tableHeight = document.documentElement.clientHeight - tableH;
          this.tableStyle = "width: 100%;"+  this.tableHeight+"px;"
          console.log('this.tableHeight',this.tableHeight);
        },


      },
      props:{
         url:'',
         columnName: {},
         optList: {},
         queryObj:{}
      },
        name: "EleTable",
      data(){
          return {
            tableStyle:"",
            headerStyle:{
              fontFamily: 'SF-Pro-Text-Medium',
              fontWeight:'bold',
              fontSize:'14px',
              background:'#e0ffff',
              color:'black',
            },
            currentPage:1, //初始页
            pageSize:10,    //    每页的数据
            total:0,    //    每页的数据
            getPage:[],
            tableHeight:'',
            windowHeight: document.documentElement.clientHeight,
            windowWidth: document.documentElement.clientWidth,
          }
      }
      ,methods:{
        getTableHeight() {
          let tableH = 190; //距离页面下方的高度
          this.tableHeight = window.innerHeight - tableH;
          this.tableStyle = "width: 100%;"+  this.tableHeight+"px;"
          console.log('this.tableHeight------',this.tableHeight);
        },
        handleClick(data,key){
          this.$emit('opt-click',data,key)
        },

        handleSizeChange(val) {
          this.pageSize=val;
          this._page();
        },
        handleCurrentChange(val) {
          this.currentPage=val;
          this._page();
        },
        _page(){
          const loading = this.$loading({
            lock: true,
            text: '拼命加载中...',
            spinner: 'el-icon-loading',
            target: this.$el
          });

          let queryObj = this.queryObj;
          queryObj.pageSize = this.pageSize;
          queryObj.pageNum = this.currentPage;
          this.$http.post(this.url,queryObj).then(res=>{
            let data= res.data.data;
            this.getPage=data.records;

            console.log('----------------data',data)
            console.log('-----------------',data.total)
            this.total=Number(data.total);
            loading.close();
          }).catch(err=>{
            console.log(err)
            loading.close();
          });
        },

      }
    }
</script>

<style scoped>

</style>
